<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar leftWidth="250rpx" rightWidth="250rpx" background-color="rgba(0,0,0,0)" left-text="意见反馈" title="正念修行馆"
			statusBar fixed :border="false" />
		<view class="content">
			<view class="bg-container">
				<image src="@/static/bg_shuimu.jpg" class="bg-image" mode="heightFix" />
				<image src="@/static/chuan.png" class="chuan" mode="widthFix" />
			</view>
			<view class="menu-container">
				<view v-for="(menu, index) in menus" :key="index" class="menu-item" @click="clickBtn(item)">
					<view class="circle" :style="{ backgroundColor: menu.backgroundColor }">
						<text class="menu-title">{{ menu.name }}</text>
					</view>
					<text class="menu-tip">{{ menu.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue';
export default {
	components: {
		uniNavBar
	},
	data() {
		return {
			menus: [
				{
					name: '正念工作',
					backgroundColor: "#87CEEB"
				},
				{
					name: '正念呼吸',
					backgroundColor: "#90EE90"
				},
				{
					name: '正念梦乡',
					backgroundColor: "#D8BFD8"
				},
				{
					name: '正念饮食',
					backgroundColor: "#FFA500"
				},
				{
					name: '正念沉思',
					backgroundColor: "#808080"
				},
				{
					name: '正念噗噗',
					backgroundColor: "#FF69B4"
				}
			]
		}
	},
	onLoad() {

	},
	methods: {
		clickBtn() {
			// 触发震动效果
			uni.vibrateShort({
				success: function () {
					console.log('震动成功');
				},
				fail: function (err) {
					console.error('震动失败', err);
				}
			});
		}
	}
}
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

@keyframes scrollBackground {
	0% {
		margin-left: 0%;
	}

	100% {
		margin-left: -389%;
	}
}

.bg-container {
	transform: translate3d(0, 0, 0);
	position: absolute;
	width: 100%;
	height: 100%;

	.bg-image {
		height: 100%;
		animation: scrollBackground 50s linear infinite;
	}

	.chuan {
		width: 250px;
		position: absolute;
		bottom: 120px;
		display: inline-block;
		left: 50%;
		margin-left: -125px;
	}
}

.menu-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 20rpx;
	width: 100%;
	height: 1000rpx;
	max-width: 600rpx;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 确保内容在圆球中央 */
}

.circle {
	width: 200rpx;
	height: 200rpx;
	background-color: #8f8f94;
	border-radius: 50%;
	margin-bottom: 10rpx;
	box-shadow:
		0 4rpx 8rpx rgba(0, 0, 0, 0.2),
		/* 基础阴影 */
		0 12rpx 24rpx rgba(0, 0, 0, 0.1);
	/* 更深的阴影 */
	text-align: center;
	line-height: 200rpx;
	position: relative;
	transition: 0.3s all;

	&:active {
		transform: scale(0.8);
	}
}

.circle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
	border-radius: 50%;
	z-index: 1;
}

.circle::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle, transparent, rgba(0, 0, 0, 0.1));
	border-radius: 50%;
	z-index: 2;
	transform: translateY(1px);
}


.menu-title {
	font-size: 36rpx;
	text-align: center;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	/* 文字阴影 */
	color: #ffffff;
	font-weight: bold;
}

.menu-tip {
	font-size: 24rpx;
	color: #8f8f94;
	text-align: center;
}
</style>